import {List,ListNode} from './list.js';
export class Editor{
    constructor(editorContent,index){
        this.editorContent=editorContent
        this.init(index)
        this.IsDebugVer=false
		this.getTextSize=new GetTextSize()
    }
    debugLog(value){
        this.IsDebugVer=value
console.log(`%c---editor.js---`, 'color: red;font-size: 12px;font-weight: bold;text-decoration: underline;',`\n使用js开发，实现代理网页的输入功能...
开发中...
已开启日志会有相关console.log()报出！！！
`);
    }
    setEditorRowPos(index){
        this.editorContent.row=index
    }
    setEditorColumnPos(index){
        this.editorContent.column=index
    }
    setEditorPos(rowIndex,columnIndex){
        this.editorContent.row=rowIndex-0
        this.editorContent.column=columnIndex
		this.setInputPos()
    }
	getTextWidth(text){
		return this.getTextSize.getTextInfo(text).width
	}
	setInputPos(){
		const editorContent=this.editorContent
		if(this.IsDebugVer){
			console.log("设置输入点",0,editorContent.column)
		}
		const textObj=this.getTextSize.getTextInfo(editorContent.rows[editorContent.row].str.slice(0,editorContent.column))
		const width=textObj.width
		editorContent.width=width
		editorContent.height=textObj.height
	}
    init(index){
        const rows=this.editorContent.rows
        const rowItem={
            str:"",
            spanList:[""],
			inputWidth:0,
			line:0
        }
        if(!rows[index]){
            if(this.IsDebugVer){
                console.log("初始化行：%s.....",index);
            }
            rows.push(rowItem)
        }else{
            if(this.IsDebugVer){
                console.log("在第%插入，并初始化.....",index);
            }
            this.editorContent.rows=shiftArr(index, rows, rowItem)
        }
    }
    inputText(e){//根据行列插入顺序插入字符
        const row=this.editorContent.row
        const column=this.editorContent.column
        // let str=this.editorContent.str
        const rows=this.editorContent.rows
        const sliceSize=this.editorContent.sliceSize
        if(!rows[row]){
            if(this.IsDebugVer){
                console.log("没有内容进行初始化");
            }
            rows[row]={
                str:"",
                spanList:[]
            }
        }
		const input=e.data||e.key
        const inputText=indexInput(rows[row].str,column,input)
        rows[row].str=inputText.text
		
		if(this.IsDebugVer){
			console.log("inputText：",inputText);
		}
        this.columnMove(input.length)
		console.log("input.length:",input.length);
		this.setInputPos()

        rows[row].spanList=sliceStr(rows[row].str,sliceSize)

		const editorWidth=this.editorContent.el.clientWidth
		const textWidth=this.getTextWidth(inputText.text.slice(0,inputText.index))
		console.log("inputText:",inputText);
		console.log("editorWidth:",editorWidth);
		console.log("textWidth:",textWidth);
		const line=editorWidth>textWidth?0:parseInt(textWidth/editorWidth)
		const inputWidth=textWidth-line/editorWidth
		rows[row].line=line
		rows[row].inputWidth=inputWidth
    }
    columnMove(index){//左右移动
        if(this.IsDebugVer){
            console.log("左右移动<---->");
        }
        const column=this.editorContent.column
        let num=column
        const row=this.editorContent.row
        const rows=this.editorContent.rows
        const len=rows[row].str.length
        if(index===1&&column===len){
            if(rows[row+1]){
                this.editorContent.row++
                num=0
            }else{
                num=len
            }
        }else if(index===-1&&column===0){
            const lastRow=rows[row-1]
            if(lastRow){
                this.editorContent.row--
                num=lastRow.str.length
            }else{
                num=0
            }
        }else{
            num+=index
        }
		
        this.editorContent.column=num
		this.setInputPos()
    }
    rowMove(index){
        let row=this.editorContent.row
        if(index===-1&&row===0){
            row=0
        }else if(this.editorContent.rows.length>(row+=index)){
            //移动后得设置列的位置，是到0，还是到文本中间，还是还是文本末尾
            const column=this.editorContent.column//之前的列位
            const toRowStrLen=this.editorContent.rows[row].str.length
            if(toRowStrLen===0){
                this.editorContent.column=0
            }else if(toRowStrLen<column){//现在文本长度小于列位,列位=现在当前行的文本长度
                this.editorContent.column=toRowStrLen
            }
            // else if(toRowStrLen>column){//现在位置文本长度大于列位,列位不不变
            //     // this.editorContent.column=0
            // }
            this.editorContent.row=row
        }
		this.setInputPos()
    }
    newRow(){//ctrl 回车
        this.editorContent.row=this.editorContent.row+1
        this.editorContent.column=0
        this.init(this.editorContent.row)
		this.setInputPos()
    }
    sliceRow(){//回车
        const row=this.editorContent.row
        const rows=this.editorContent.rows
        const column=this.editorContent.column
        //列是索引用来在rows[row]上分割成两个数组
        const strLen=rows[row].str.length
        const spanListLen=rows[row].spanList.length
        if(strLen-1===column){
            this.newRow()
        }else{
            const arr=[
                {
                    str:rows[row].str.slice(0,column),
                },
                {
                    str:rows[row].str.slice(column,strLen),
                }
            ]
            arr.forEach(item=>{
                item.spanList=sliceStr(item.str, this.editorContent.sliceSize)
            })
            this.editorContent.column=0
            this.editorContent.row++
            this.editorContent.rows=replaceShiftArr(row,rows,arr)
        }
		this.setInputPos()
    }
}
class GetTextSize{
    constructor(fontFamily="微软雅黑",size="12px"){
        const canvas=document.createElement("canvas")
        this.ctx=canvas.getContext("2d");
        this.ctx.font=`${size} ${fontFamily}`
    }
    setFont=(fontFamily="微软雅黑",size="12px")=>{
        this.ctx.font=`${size} ${fontFamily}`
    }
    getTextInfo(text){
		const metrics=this.ctx.measureText(text)
        return {
			width:metrics.width,
			h:metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,
			height:metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent
		}
    }
}
function sliceStr(str,sliceSize){
    let len=str.length
    if(len<=sliceSize){
        return [str]
    }else{
        const sliceText=str.slice(0,sliceSize)
        const newStr=str.slice(sliceSize,len)
        return [sliceText,...sliceStr(newStr,sliceSize),]
    }
}
function indexInput(str,index,text){
    let ahead=str.slice(0,index)+text
    let behind=str.slice(index,str.length)
    return {
        text:ahead+behind||"",
        index:index+1
    }
}
function shiftArr(index,arr,value){//数组后移
    return arr.slice(0,index).concat(value,arr.slice(index,arr.length))
}
function replaceShiftArr(index,arr,value){//数组替换并后移
    let tempArr=[]
    tempArr=tempArr.concat(value)
    arr.splice(index,1,...tempArr)
    return arr
}